import React, {useEffect} from 'react';
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
import {Col, Row} from "reactstrap";
import {SET_SCHEDULABLE_FIELD, SET_SCHEDULE_FIELD} from "../../../../../../redux/constants/schedules";
import DataAndTime from "../Components/DataAndTime";
import {setFieldData} from "../../../../../../redux/actions/helper";
import Organization from "../../../../../../components/general/YandexAPI/Organization";
import {parseLocationData} from "../../../../../../helpers/utils";

const Hotel = props => {
  const {setFieldData, schedule, scheduleId, hotel} = props;

  const addressOnClick = e => {
    if (e.properties) {
      setFieldData(SET_SCHEDULABLE_FIELD, 'address', parseLocationData(e))
    }
  }
  const addressOnChange = e => {
    setFieldData(SET_SCHEDULABLE_FIELD, 'address', {name: e})
  }

  return (
    <React.Fragment>
      <Row>
        <Col md={5} className="align-self-center">
          <div className="description"/>
          <Organization
            id='placeTabInfo'
            className={`schedule-item schedule-input`}
            placeholder='Адрес'
            onClick={addressOnClick}
            onChange={addressOnChange}
            value={hotel.address && hotel.address.name}
          />
        </Col>
        <Col md={7} className="align-self-center">
          <DataAndTime
            dateDesc={'Дата начала'}
            timeDesc={'Время начала'}
            begin={schedule.begin}
            end={schedule.end}
            setFieldData={setFieldData}
            type="begin"
          />
        </Col>
      </Row>
      <Row>
        <Col md={5} className="align-self-center">
          <div className="description"/>
          <input placeholder={'№ рейса'}
                 onChange={e => setFieldData(SET_SCHEDULABLE_FIELD, 'phone', e.target.value)}
                 value={hotel.phone}
                 className={`schedule-item schedule-input`}/>
        </Col>
        <Col md={7} className="align-self-center">
          <DataAndTime
            dateDesc={'Дата конца'}
            timeDesc={'Время конца'}
            begin={schedule.begin}
            end={schedule.end}
            setFieldData={setFieldData}
            type="end"
          />
        </Col>
      </Row>
    </React.Fragment>
  );

}

const mapStateToProps = state => ({
  hotel: state.schedules.schedule.schedulable
});
const mapDispatchToProps = dispatch => bindActionCreators({
  setFieldData
}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(Hotel);
